
let divList = [];
let timer = null;
let dom = document.getElementsByClassName('container')[0];
let btns = document.getElementsByClassName('btnC')[0].getElementsByTagName('button');
btns[0].addEventListener('click',()=>{
    reset();
    preOrder(dom);
    changeColor();
},false);
btns[1].addEventListener('click',()=>{
    reset();
    inOrder(dom);
    changeColor();
},false);
btns[2].addEventListener('click',()=>{
    reset();
    postOrder(dom);
    changeColor();
},false);
// 前序遍历
function preOrder(node){
   if(!(node == null)){
      divList.push(node);
      preOrder(node.firstElementChild);
      preOrder(node.lastElementChild);
   }
}
// 中序遍历
function inOrder(node){
  if(!(node == null)){
     inOrder(node.firstElementChild);
     divList.push(node);
     inOrder(node.lastElementChild);
  }
}
// 后序排列
function postOrder(node){
    if(!(node == null)){
       postOrder(node.firstElementChild);
       postOrder(node.lastElementChild);
       divList.push(node);
    }
  }
// 改变颜色
function changeColor(){
    let i =0;
    divList[i].style.background = 'blue';
    timer = setInterval(() => {
        i++;
        if(i<divList.length){
           divList[i].style.background = 'blue';
           divList[i-1].style.background = '#fff';
        }else{
           clearInterval(timer);
           divList[i-1].style.background = '#fff';
        }
    }, 500);

}

//清除样式
function reset(){
    divList = [];
    clearInterval(timer);
    let divs= document.getElementsByTagName('div');
    for(let i=0;i<divs.length;i++){
      divs[i].style.background = '#fff';
    }
}